<!-- components/SortIcon.vue -->
<template>
  <span class="sort-icon-container">
    <uni-icons 
      class="sort-icon" 
      :color="upIconColor" 
      type="up" 
      size="20" 
      @click="emitSort('asc')">
    </uni-icons>
    <uni-icons 
      class="sort-icon" 
      :color="downIconColor" 
      type="down" 
      size="20" 
      @click="emitSort('desc')">
    </uni-icons>
  </span>
</template>

<script>
export default {
  props: {
    column: String,
    sortBy: String,
    sortOrder: String,
  },
  computed: {
    upIconColor() {
      return this.sortBy === this.column && this.sortOrder === 'asc' ? 'var(--thorui-color-pink)' : '#606266';
    },
    downIconColor() {
      return this.sortBy === this.column && this.sortOrder === 'desc' ? 'var(--thorui-color-pink)' : '#606266';
    }
  },
  methods: {
    emitSort(order) {
      this.$emit('click', order);
    }
  }
};
</script>

<style scoped>
.sort-icon-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 5px; /* Space between icon and text */
}

.sort-icon {
  cursor: pointer;
  display: inline-block;
}
</style>
